<template>
	<view class="">
		<u-popup v-model="status" mode="bottom" length="55%" border-radius="30" @close="close()">
			<view class="popupWrap">
				<view class="popuptitle">
					车辆详情
				</view>
				<view class="popupList" v-for="(it,ind) in cardetailList" :key="ind"  @click="selectCarDetail(it)">
					{{it.label}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
		cardetailList:[]
			}
		},
		props:['status','id'],
		watch:{
			id(val){
				if(val){
					this.cardetailList.forEach(it=>{
						if(it.value==val){
							this.selectCarDetail(it)
						}
					})
				}
			}
		},
		mounted() {
			this.getCarDetail()
		},
		methods:{
			// 车辆详情
			async getCarDetail() {
			  try {
			    const res = await this.$api.jsonData.getCarDetail()
			    console.log(res)
			    this.cardetailList = res.data.list
			  } catch (e) {
			    //TODO handle the exception
			  }
			},
			selectCarDetail(it){
				this.$emit('getCarDetail',it)
			},
			close(){
				// console.log(2222,'close')
				this.$emit('close',false)
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupWrap{
		background: #FFFFFF;
		text-align: center;
		.popuptitle{
			height: 96rpx;
			border-bottom: 1px solid #EEEEEE;
			line-height: 96rpx;
		}
		.popupList{
			height: 120rpx;
			line-height: 120rpx;
			border-bottom:0px
		}
	}
</style>

